<template>
  <div @click="toggleClick">
    <!-- <svg
      :class="{'is-active':isActive}"
      class="MapListIcon"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path d="M977.322667 582.357333a472.618667 472.618667 0 0 1-395.050667 400v36.522667h-145.493333v-36.522667a472.576 472.576 0 0 1-395.008-400.128H0.256v-145.408h43.221333a472.832 472.832 0 0 1 393.301334-388.010666V0.213333h145.536v48.64a472.917333 472.917333 0 0 1 393.301333 387.882667h43.221333v145.621333h-41.514666zM578.986667 122.410667v39.893333h-139.008V122.453333a399.701333 399.701333 0 0 0-322.944 317.909334h44.928v139.008H115.2a399.488 399.488 0 0 0 324.821333 329.429333v-51.456h139.008V908.8a399.488 399.488 0 0 0 324.821334-329.386667h-46.805334V440.32h44.970667a399.914667 399.914667 0 0 0-322.986667-317.866667v-0.085333z" />
    </svg> -->
    <!-- <img src="@/assets/images/fence.png" class="MapListIcon" /> -->
    <div class="MapListIcon">
   <i class="iconfont icon-dianziweilan1"></i>
</div>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleClick() {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.MapListIcon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius:10px;
  background:$defaultBlue;
}

.MapListIcon.is-active {
  transform: rotate(180deg);
}
.MapListIcon i{ color: #fff;
    padding-right: 0;
}
</style>